<template>
  <div>
    <div :id="chartName" class="box"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import 'echarts-liquidfill'
import * as echarts from 'echarts'
const props = defineProps<{
  chartName: string
}>()
const demo = () => {
  let myChart = echarts.init(document.getElementById(props.chartName))

  var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
    {
      offset: 0,
      color: '#87F3ED',
    },

    {
      offset: 0.62,
      color: '#A5B8FF',
    },

    {
      offset: 1,
      color: '#FF0000',
    },
  ])

  var option = {
    backgroundColor: '#05163B',
    title: {
      x: 'center',
      y: '38%',

      textStyle: {
        fontWeight: 'normal',
        fontSize: 25,
        color: '#A0C2FC',
      },
    },
    series: [
      {
        name: '内圆环2',
        type: 'pie',
        radius: '7%',
        hoverAnimation: false,
        cursor: 'default',
        tooltip: {
          show: false,
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        itemStyle: {
          color: '#31F3FF',
        },
        animation: false,
        data: [1],
      },
      {
        name: '',
        type: 'gauge',

        detail: false,
        splitNumber: 10, //刻度数量
        radius: '100%', //图表尺寸
        center: ['50%', '50%'],
        startAngle: 220, //开始刻度的角度
        endAngle: -30, //结束刻度的角度
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: '#1fdde7',
            width: 8,
          },
          length: 8,
          splitNumber: 2,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      {
        name: '欧亚（低态）',
        type: 'gauge',
        z: 3,
        min: 0,
        max: 100,
        radius: '60%', //圆3
        axisLine: {
          // 坐标轴线
          lineStyle: {
            // 属性lineStyle控制线条样式
            width: 3,
            color: [
              [0.1, 'rgb(26, 70, 135)'],
              [
                0.3,
                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgb(26, 70, 135)',
                  },
                  {
                    offset: 0.8,
                    color: 'rgb(31, 181, 224)',
                  },
                ]),
              ],
              [0.7, 'rgb(31, 181, 224)'],
              [
                0.9,
                new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgb(35, 88, 154)',
                  },
                  {
                    offset: 0.6,

                    color: 'rgb(31, 181, 224)',
                  },
                ]),
              ],
              [1, 'rgb(35, 88, 154)'],
            ],
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 10,
          textStyle: {
            color: '#ccc',
            fontSize: 16,
            fontWeight: 500,
          },
        },

        splitLine: {
          // 分隔线
          show: false,
        },
        detail: {
          formatter: '{value}%',
          fontSize: 16,
          fontWeight: 'bold',
          color: '#75e7fe',
          fontFamily: 'STXinwei',
        },
        title: {
          offsetCenter: ['10%', '120%'],
          fontSize: 16,
          fontWeight: 'bold',
          color: '#75e7fe',
          fontFamily: 'STXinwei',
        },
        pointer: {
          width: 3, //指针的宽度
          length: '60%', //指针长度，按照半圆半径的百分比
          shadowColor: '#ccc', //默认透明
          shadowBlur: 5,
        },
        data: [
          {
            value: 20,
            name: '欧亚（低态）',
            itemStyle: { color: '#75e7fe', fontSize: 0 },
          },
        ],
      },
    ],
  }

  option && myChart.setOption(option)
}
onMounted(() => {
  demo()
})
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 164px;
  background: #fff;
}
</style>